<template>
  <div style="background-color:#ffffff;">
    <div slot="icon" style="border-bottom:1px solid red;" :style="{width: size700,marginLeft:size30, marginTop:size500}">
      <img :src="phone" style="float:left;" :style="{width:size30,height:size30,marginTop:size35}" ></img> 
      <mt-field class="phoneNumber"  placeholder="请输入手机号" v-model="phoneNumber"></mt-field>
    </div>
    <div style="border-bottom:1px solid red;" :style="{ height: size100, lineHeight:size100, width: size700,marginLeft:size30}">
      <img style="float:left;" :src="yanzhengma" :style="{width:size30,height:size30,marginTop:size35}" ></img> 
      <mt-field style="float:left;" :style="{width:size400}"  placeholder="请输入验证码" type="email" v-model="message"></mt-field>
      <span v-show="sendAuthCode" style="float:right;color:#A52A2A" @click="aClick()">获取验证码</span>
      <span v-show="!sendAuthCode" class="auth_text" :style="{fontSize: size10}"> <span>{{auth_time}} </span> 秒之重新发送验证码</span> 
    </div>
    <mt-button style="background-color:#A52A2A;color:#fff;border-radius: 20%;" :style="{width:size700,marginTop: size60,marginLeft:size30}">一键登录</mt-button>
    <div :style="{fontSize: size20, marginTop:size30, marginLeft:size150 }">注册即代表您同意&nbsp;<span style="color:blue;">服务条款使用守则</span></div>
  </div> 
</template>

<script>
export default {
  data () {
    return {
      sendAuthCode: true,
      auth_time: 0,
      phone: '../../../static/phoneNumber.png',
      yanzhengma: '../../../static/yanzhengma.png',
      result: '',
      phoneNumber: '',
      message: '',
      resultClass: 'n-success'
    }
  },
  mounted () {
    this.$parent.$parent.$children[0].$el.innerHTML = ''
    this.toSign(false)
  },
  computed: {
    size60 () {
      return this.clientWidth * 60 / 750 + 'px'
    },
    size10 () {
      return this.clientWidth * 10 / 750 + 'px'
    },
    size20 () {
      return this.clientWidth * 20 / 750 + 'px'
    },
    size30 () {
      return this.clientWidth * 30 / 750 + 'px'
    },
    size35 () {
      return this.clientWidth * 35 / 750 + 'px'
    },
    size100 () {
      return this.clientWidth * 100 / 750 + 'px'
    },
    size150 () {
      return this.clientWidth * 150 / 750 + 'px'
    },
    size200 () {
      return this.clientWidth * 200 / 750 + 'px'
    },
    size500 () {
      return this.clientWidth * 500 / 750 + 'px'
    },
    size600 () {
      return this.clientWidth * 600 / 750 + 'px'
    },
    size700 () {
      return this.clientWidth * 700 / 750 + 'px'
    },
    size800 () {
      return this.clientWidth * 800 / 750 + 'px'
    },
    size400 () {
      return this.clientWidth * 400 / 750 + 'px'
    },
    initWidth () {
      return this.clientWidth + 'px'
    },
    initHeight () {
      return this.clientHeight + 'px'
    }
  },
  methods: {
    aClick () {
      this.sendAuthCode = false
      this.auth_time = 60
      var authTimeTimer = setInterval(() => {
        this.auth_time--
        if (this.auth_time <= 0) {
          this.sendAuthCode = true
          clearInterval(authTimeTimer)
        }
      }, 1000)
    }
  }
}
</script>

<style>

</style>
